<template>
  <div :class="{ 'card card51': !isLine, 'card card52': isLine }">
    <h2><span /></h2>
    <div ref="box" class="border-box">
      <dv-scroll-board class="dv-scr-board" :config="config" />
    </div>
  </div>
</template>

<script>
import Bus from '@/common/bus'
export default {
  components: {},
  data() {
    return {
      isLine: false,
      basicH: 40,
      config: {}
    }
  },
  mounted() {
    const that = this
    Bus.$on('nodeInfo', nodeInfo => {
      this.isLine = false
      let rows = 6
      const data = []
      const currentNodeFlow = nodeInfo.currentNodeFlow
      for (var i = 0; i < currentNodeFlow.length; i++) {
        const temp = currentNodeFlow[i]
        const tmp = []
        tmp[0] = temp.i
        tmp[1] = temp.inOrOut == 1 ? '流入' : '流出'
        tmp[2] = "<span class='colorGrass'>" + temp.flow + '</span>'
        data[i] = tmp
      }
      that.config = {
        header: ['节点编号', '流入流出', '碳流'],
        data,
        rowNum: rows, // 表格行数
        headerHeight: that.basicH,
        headerBGC: 'rgba(15, 22, 64, .1)', // 表头
        oddRowBGC: 'rgba(15, 22, 64, .1)', // 奇数行
        evenRowBGC: 'rgba(15, 22, 64, .1)', // 偶数行
        index: false,
        columnWidth: [150],
        align: ['center', 'center', 'center']
      }
    })
    Bus.$on('lineInfo', lineInfo => {
      this.isLine = true
      let rows = 6
      const data = []
      const wastageRecord = lineInfo.wastageRecord
      for (var i = 0; i < wastageRecord.length; i++) {
        const temp = wastageRecord[i]
        const tmp = []
        tmp[0] = temp.from
        tmp[1] = temp.to
        tmp[2] = "<span class='colorGrass'>" + temp.wastageRecord + '</span>'
        data[i] = tmp
      }
      that.config = {
        header: ['From', 'To', '损耗碳流'],
        data,
        rowNum: rows, // 表格行数
        headerHeight: that.basicH,
        headerBGC: 'rgba(15, 22, 64, .1)', // 表头
        oddRowBGC: 'rgba(15, 22, 64, .1)', // 奇数行
        evenRowBGC: 'rgba(15, 22, 64, .1)', // 偶数行
        index: false,
        columnWidth: [150],
        align: ['center', 'center', 'center']
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.border-box {
  margin: 20px 0 10px;
  border-radius: 10px;
  padding: 0 10px 0;
  height: calc(100% - 60px) !important;
  .dv-scr-board {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>
